<template>
	<div>
		<div class="nav">
			<div @click="showPopup">{{ChildName}}/USDT</div>
		</div>
		<van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
			<van-cell v-for="(item,index) in List" :key="index" @click="clicktype(item.childCoinName)">
				{{item.childCoinName}}/USDT

			</van-cell>
		</van-popup>
		<!-- 币种信息-->
		<div class="header-one">
			<div>
				<div>{{close}}</div>
				<div>≈{{(close*motherRateForCNY).toFixed(2)}} CNY </div>
				<div>{{(riseAndfall).toFixed(2)}}%</div>

			</div>
			<div style="line-height: 23px;">
				<div class="top">
					<div>24H最高</div>
					<div>{{high}}</div>
				</div>
				<div class="top">
					<div>24H最低</div>
					<div>{{low}}</div>
				</div>
				<div class="top">
					<div>24H量</div>
					<div>{{(volume).toFixed(2)}}</div>
				</div>

			</div>
		</div>
		<!-- 分时周 -->
		<div class="week">
			<div v-for="(item, index) in timeDate" @click="clickAdd(index, item.name)" :class="{ red: i === index }"
				:key="index">
				<div>{{ item.name }}</div>
			</div>
		</div>
		<!-- <iframe id="tradingViews" width="100%" height="430" src="../../static/contract/contract.html"
			frameborder="0"></iframe> -->
			<!-- 打包修改 -->
			<iframe id="tradingViews" width="100%" height="430" src="./static/contract/contract.html"
			frameborder="0"></iframe>

		<div class="tabs">
			<div :class="[chosseType == 0?'chooseNow': '']" @click="chooseChange(0)">买卖盘</div>
			<div :class="[chosseType == 1?'chooseNow': '']" @click="chooseChange(1)">最新成交</div>
			<div :class="[chosseType == 2?'chooseNow': '']" @click="chooseChange(2)">币种信息</div>
		</div>
		<!-- 买卖盘 -->
		<div v-if="chosseType==0">
			<div class="navone">
				<div class="nav-one">
					<div>数量</div>
					<div>买价</div>
				</div>
				<div class="nav-one">
					<div>数量</div>
					<div>卖价</div>
				</div>
			</div>
			<div class="nav-left">
				<div class="nav-left-one">
					<div style="display: flex;" class="nav-header" v-for="(item,index) in buyList" :key="index">
						<div style="flex:1">{{item.amount}}</div>
						<div>{{item.price}}</div>
					</div>

				</div>
				<div class="nav-left-two">
					<div style="display: flex;" class="nav-header" v-for="(item,index) in sellList" :key="index">
						<div style="flex:1">{{item.amount}}</div>
						<div>{{item.price}}</div>
					</div>
				</div>
			</div>


		</div>
		<div v-if="chosseType==1">
			<div class="List-one">
				<div>时间</div>
				<div>方向</div>
				<div>价格（BTC）</div>
				<div>数量（{{ChildName}}）</div>
			</div>
			<div class="List-one" v-for="(item,index) in Record" :key="index">
				<div>{{item.timeFormat.substring(10,16)}}</div>
				<div style="color:#19B0BE" v-if="item.type==1">买入</div>
				<div style="color: #EB6272;" v-if="item.type==2">卖出</div>
				<div>{{item.price.toFixed(2)}}</div>
				<div>{{item.amount.toFixed(2)}}</div>
			</div>

		</div>
		<div v-if="chosseType==2">
			3
		</div>

		<!-- 买卖盘按钮 -->
		<div class="foor">
			<div class="nav-botton">

				<div>买入</div>



				<div>卖出</div>

			</div>
		</div>

	</div>

</template>
<script>
	import { get24hrDataForAgreement, get24hrDataByTwoCoinName, getBuySellData, getDealRecord } from "../api/api";
	import $ from 'jquery';
	import { Popup } from 'vant';
	export default {
		components: {
			[Popup.name]: Popup,

		},
		data() {
			return {
				List: [],
				show: false,
				index: 0,
				timeDate: [
					{
						name: '分时'
					},
					{
						name: '1分钟'
					},
					{
						name: '5分钟'
					},
					{
						name: '15分钟'
					},
					{
						name: '30分钟'
					},
					{
						name: '1小时'
					},
					{
						name: '日线'
					},
				],
				// 分时秒
				i: 2,

				ChildName: 'BTC',
				close: "",//价格
				high: "",
				volume: "",
				low: "",
				motherRateForCNY: "",
				riseAndfall: "",
				chosseType: 0,
				buyList: [],//买
				sellList: [],//卖
				Record: [],
				

			};
		},
		mounted() {
			
			

				
				
				
		},
		created() {
			this.MateList()
			this.Matecoin()
			this.getBuySell()
			this.getDeal()
		},
		methods: {
			showPopup() {
				this.show = true;
			},
			chooseChange(val) {
				this.chosseType = val
			},
			clicktype(name) {

				this.ChildName = name
				$("#tradingViews")[0].contentWindow.window.tvWidget.setSymbol(this.ChildName + '/USDT', "D");
				this.show = false;
				this.Matecoin()
			},

			MateList() {
				get24hrDataForAgreement().then(res => {
					console.log(res.data, 111)
					if (res.data.code == 200) {
						this.List = res.data.data
					}
				})
			},

			// 买卖盘
			getBuySell() {
				let data = {
					childCoinName: this.ChildName,
					motherCoinName: 'USDT'
				};
				getBuySellData(data).then(res => {
					if (res.data.code == 200) {
						if (res.data.data.buyList.length > 10) {
							res.data.data.buyList.length = 10;
						} else if (res.data.data.buyList.length < 10) {
							res.data.data.buyList.length = res.data.data.buyList.length;
						}
						if (res.data.data.sellList.length > 10) {
							res.data.data.sellList.length = 10;
						} else if (res.data.data.sellList.length < 10) {
							res.data.data.sellList.length = res.data.data.sellList.length;
						}
						this.buyList = res.data.data.buyList;
						this.sellList = res.data.data.sellList;

					}

				})
			},
			// 最新价
			Matecoin() {
				let data = {
					childCoinName: this.ChildName,
					motherCoinName: 'USDT'
				};
				get24hrDataByTwoCoinName(data).then(res => {
					this.close = res.data.data.close
					this.high = res.data.data.high
					this.volume = res.data.data.volume
					this.low = res.data.data.low
					this.motherRateForCNY = res.data.motherRateForCNY
					this.riseAndfall = res.data.data.riseAndfall
				})
			},
			// 最新成交
			getDeal() {
				let data = {
					childCoinName: this.ChildName,
					motherCoinName: 'USDT'
				};
				getDealRecord(data).then(res => {
					this.Record = res.data.data.dealRecordList
				})
			},
			clickAdd(index, name) {
				this.i = index
				console.log(index, name)
				if (name == "分时") {
					$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setResolution('1');
					$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setChartType(3);
				} else if (name == "1分钟") {
					$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setResolution('1');
					$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setChartType(1);
				} else if (name == "5分钟") {
					$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setResolution('5');
					$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setChartType(1);
				} else if (name == "15分钟") {
					$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setResolution('15');
					$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setChartType(1);
				} else if (name == "30分钟") {
					$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setResolution('30');
					$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setChartType(1);
				} else if (name == "1小时") {
					$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setResolution('60');
					$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setChartType(1);
				} else if (name == "日线") {
					$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setResolution('D');
					$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setChartType(1);
				}
			},

		}
	};
</script>
<style lang="less" scoped>
	.nav {
		div {
			margin-top: 20px;
			text-align: center;
			padding-bottom: 20px
		}
	}

	.header-one {
		width: 95%;
		display: flex;
		margin: 0 auto;
		justify-content: space-between;

		div:nth-child(1) {
			div:nth-child(1) {
				font-size: 24px;
				font-family: PingFang SC;
				font-weight: 800;
				color: rgba(252, 102, 105, 1);
			}

			div:nth-child(2) {
				font-size: 12px;
				font-family: DIN;
				font-weight: 500;
				color: rgba(167, 175, 200, 1);
			}

			div:nth-child(3) {
				font-size: 12px;
				font-family: DIN;
				font-weight: 500;
				color: rgba(167, 175, 200, 1);
			}
		}

		div:nth-child(2) {
			.top {
				display: flex;
				justify-content: space-between;

				div:nth-child(1) {
					font-size: 12px;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(167, 175, 200, 1);
				}

				div:nth-child(2) {
					font-size: 12px;
					font-family: DIN;
					font-weight: 500;
					color: rgba(58, 64, 80, 1);
					margin-left: 20px;
				}
			}
		}



	}

	// 分时
	.week {
		display: flex;
		font-size: 14px;
		color: #7E869E;
		justify-content: space-between;
		padding: 0 10px;
		padding-top: 15px;
		background: #ffffff;
	}

	.red {
		display: flex;
		font-size: 14px;
		color: #5B76CF;
		border-bottom: 1px solid #5B76CF;
		padding-bottom: 10px;
	}

	.chooseColor {
		font-size: 14px;
		color: #5B76CF;

	}

	.tabs {
		display: flex;
		justify-content: space-between;
		width: 95%;
		margin: 0px auto;

		>div {
			font-size: 13px;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(58, 64, 80, 1);
		}

		.chooseNow {
			font-size: 13px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #5B76CF;
		}
	}

	.navone {
		width: 95%;
		margin: 25px auto;
		display: flex;
		justify-content: space-between;

		.nav-one {
			width: 46%;
			display: flex;
			justify-content: space-between;
			font-size: 13px;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(167, 175, 200, 1);


		}

	}

	.nav-left {
		width: 95%;
		margin: 0 auto;
		padding-bottom: 50px;
		display: flex;
		justify-content: space-between;

		.nav-left-one {
			width: 46%;

			div:nth-child(1) {
				font-size: 13px;
				font-family: DIN;
				font-weight: 500;
				color: rgba(58, 64, 80, 1);
				height: 25px;
			}

			div:nth-child(2) {
				font-size: 13px;
				font-family: DIN;
				font-weight: 500;
				color: #19B0BE;
				height: 25px;
			}

		}

		.nav-left-two {
			width: 46%;

			div:nth-child(1) {
				font-size: 13px;
				font-family: DIN;
				font-weight: 500;
				color: rgba(58, 64, 80, 1);
				height: 25px;
			}

			div:nth-child(2) {
				font-size: 13px;
				font-family: DIN;
				font-weight: 500;
				color: #EB6272;
				height: 25px;
			}
		}
	}

	.foor {
		width: 100%;
		position: fixed;
		height: 50px;
		bottom: 0px;
		left: 0;
		right: 0;
		background: #ffffff;
		z-index: 999999;
	}

	.nav-botton {
		width: 95%;

		margin: 0px auto;

		display: flex;
		justify-content: space-between;


		div:nth-child(1) {
			width: 46%;
			height: 40px;
			background: #19B0BE;
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			line-height: 40px;

		}

		div:nth-child(2) {
			width: 46%;
			height: 40px;
			background: #EB6272;
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			line-height: 40px
		}
	}

	/* 近期成交 */
	.List-one {
		width: 95%;
		margin: 26px auto;
		display: flex;
		justify-content: space-between;
		font-size: 13px;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(167, 175, 200, 1);
	}
</style>